class Slide{
    el=null
    sections=[]
    nums=[]
    index=0

    constructor(config) {
        this.config=config
    }

    run() {
        this.createMainEl()
        this.creaeNums()
        this.createRotate()

        setInterval(() => {
            ++this.index
            if (this.index == 4) this.index = 0
            this.btnEvent(this.index)
        }, 5000)
    }

    btnEvent(index) {
        this.index = index
        this.removeActive()
        this.nums[this.index].classList.add('active')
        this.sections.map((section, i) => {
          setTimeout(() => {
            section.style.transform = `rotateY(${index * 90}deg)`
          }, this.config.limit * i)
        })
    }

    createRotate() {
        this.nums.map((item,index)=>{
            item.addEventListener('click',()=>{
                this.index=index
                this.removeActive()
                item.classList.add('active')
                this.sections.map((section,i)=>{
                    setTimeout(() => {
                        section.style.transform = `rotateY(${index * 90}deg)`
                    }, i*this.config.timeout);
                })
            })
        })
    }

    removeActive() {
        this.nums.map((item,i)=>item.classList.remove('active'))
    }

    creaeNums() {
        const div=document.createElement('div')
        div.classList.add('change')
        for (const n of [1, 2, 3, 4]) {
            let span = document.createElement('span')
            span.innerText = n
            div.insertAdjacentElement('beforeEnd', span)
            this.nums.push(span)
        }
        this.el.insertAdjacentElement('beforeEnd', div)
        this.nums[0].classList.add('active')
    }

    createMainEl() {
        this.el=document.querySelector(this.config.el)
        this.el.style.width=this.config.width+'px'
        this.el.style.height=this.config.height+'px'
        
        const container = document.createElement('div')
        container.classList.add('container')
        container.style.width = this.config.width + 'px'
        container.style.height = this.config.height + 'px'

        for (let i=0;i<this.config.limit;i++) {
            container.insertAdjacentElement("beforeEnd",this.createSection(i))
        }
        this.el.insertAdjacentElement('beforeEnd',container)
    }

    createSection(i) {
        let section=document.createElement('section')
        section.style.width=this.config.width+'px'
        section.style.height=this.height()+'px'
        section.style.transformOrigin=`center center -${this.config.width/2}px`
        // console.log(section)
        this.sections.push(section)
        // console.log(this.sections)

        for (const [,data] of this.config.images.entries()) {
            let div = document.createElement('div')
            div.style.width=this.config.width+'px'
            div.style.height=`${this.height()}px`
            div.style.transformOrigin = `center center -${this.config.width / 2}px`
            let img = document.createElement('img')
            img.src = data.path
            img.style.cssText = `transform: translateY(-${this.height() * i}px)`
            div.insertAdjacentElement('beforeEnd',img)
            section.insertAdjacentElement('beforeEnd',div)
            // 使图片能够点击
            img.addEventListener('click',()=>{
                window.location.href=data.link
            })
        }
        return section
    }


    height() {
        return this.config.height/this.config.limit
    }
}